<template>
  <div>
    <el-row>
      <el-col :span="5" :style="b_style">
        <el-tree :data="menus" :props="defaultProps" node-key="id" @node-click="nodeClick">
        </el-tree>
      </el-col>

      <el-col :span="19" style="padding: 15px" :style="b_style">
        <el-col>
          <el-form-item label="成就查询">
            <el-input
                v-model="searchStr"
                placeholder="请输入"
                style="width: 80%;"
                v-on:keyup.enter="searchF"
            >
              <template #prepend>
                <el-button :icon="Search"/>
              </template>
            </el-input>
            <el-button @click="searchF">查询</el-button>

          </el-form-item>

        </el-col>

        <el-col style="margin-top: 15px">
          <el-card shadow="hover" style="margin-top: 10px;width: 100%" v-for="a in achievements" :key="a.ID">
            <template #header>
              <el-link :underline="false" @click="iGba(a.ID)">
                <span style="font-size: 18px">{{ a.Name }}</span>
              </el-link>
            </template>
            <el-col>
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="4">
                      <el-image :src="'https://icon.jx3box.com/icon/'+a.IconID+'.png'"></el-image>
                    </el-col>
                    <el-col :span="20">
                      <span style="padding-bottom: 20px">
                    {{ a.Desc }}
                  </span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="2" :offset="18">
                      <el-col v-if="a.Item !== null">
                        <el-tooltip raw-content placement="left" effect="customized">
                          <template #content>
                            <div style="width: 160px;background-color: #254040">
                              <p style="color: #d241d2;font-size: 17px;padding: 3px">{{ a.Item.Name }}</p>
                              <p style="color: #e0e0e0;font-size: 14px;padding: 3px" v-if="a.Item.TypeLabel!==null">
                                {{ a.Item.TypeLabel }}</p>
                              <!--                              <p style="color: #e0e0e0;font-size: 14px;padding: 3px" v-if="a.Item.Requires[10]!==''">{{ a.Item.Requires[10] }}</p>-->
                              <p style="color: #f3f31f;font-size: 14px;padding: 3px" v-if="a.Item.Level!==null">
                                品质等级{{ a.Item.Level }}</p>
                              <p style="color: #e0e0e0;font-size: 14px;padding: 3px" v-if="a.Item.GetType!==null">
                                物品来源:{{ a.Item.GetType }}</p>
                              <p style="color: #00af00;font-size: 14px;padding: 3px" v-if="a.Item.Desc!==null"
                                 v-html="a.Item.Desc.replace('<Text>text=','').replace('font=105 </text>','').replace('font=100','')"></p>
                            </div>
                          </template>
                          <el-image
                              :src="'https://icon.jx3box.com/icon/'+a.Item.IconID+'.png'"></el-image>
                        </el-tooltip>

                      </el-col>
                    </el-col>
                    <el-col :span="2">
                      <span style="font-size: 25px;line-height: 40px">{{ a.Point }}</span>
                    </el-col>
                    <el-col :span="2">
                      <el-image src="https://cdn.jx3box.com/img/dashboard/point.svg"
                                style="height: 25px;width: 25px;margin-top: 6px"></el-image>
                    </el-col>
                  </el-row>

                </el-col>
              </el-row>

            </el-col>
            <el-collapse>
              <el-collapse-item
                  title="👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇">
                <p style="text-align: center;font-size: 17px" v-if="a.PrefixName!==null">称号: {{ a.PrefixName }}</p>
                <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap"
                        v-if="a.SubAchievementList!==null">
                  <el-col :span="7" v-for="p in a.SubAchievementList" :key="p.ID"
                          style="margin-left: 15px;height: 30px;">
                    <el-row>
                      <el-col :span="4">
                        <el-image :src="'https://icon.jx3box.com/icon/'+p.IconID+'.png'"
                                  style="height: 20px;width: 20px"></el-image>
                      </el-col>
                      <el-col :span="20">
                        <el-link @click="iGba(p.ID)">
                          <span style="text-align: center;">{{ p.Name }}</span>
                        </el-link>

                      </el-col>
                    </el-row>


                  </el-col>
                </el-col>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="900">
      <el-col v-html="message"></el-col>
    </el-drawer>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {j3api} from "@/axios/j3http";
import {Search} from '@element-plus/icons-vue'

export default defineComponent({
  name: "AchievementPage",
  data() {
    return {
      Search,
      menus: [],
      searchStr: '',
      achievements: [],
      defaultProps: {
        children: 'children',
        label: (data) => {
          return data.name + "(" + data.achievements_count + ')'
        }
      },
      b_style: {
        height: document.documentElement.clientHeight - 40 + 'px',
        borderRight: '1px solid #6666',
        overflow: 'hidden',
        overflowY: 'scroll'
      },
      drawer: false,
      message: ''
    }
  },
  methods: {
    nodeClick(data) {
      j3api.getAchievement(data.id).then(res => {
        this.achievements = res.data.achievements
      })
    },
    iGba(id) {
      j3api.getWiki(id).then(res => {
        this.message = res.data.data.post.content
        this.drawer = true
      })
    },
    searchF() {
      j3api.search(this.searchStr).then(res => {
        console.log(res);
        this.achievements = res.data.data.achievements
        console.log(this.achievements);
      })
    }
  },
  async mounted() {
    const res = await j3api.getAchievementMenu()
    let f = Object.keys(res.data.menus)
    for (let i = 0; i < f.length; i++) {
      this.menus.push(res.data.menus[f[i]])
    }
  }
})
</script>

<style scoped>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 0;
  background: #254040;
  border-radius: 8px;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: #254040;
  right: 0;
  border-radius: 8px;
}
</style>
